import {CCard} from '@/components/card'
import AddCameraModal from '@/components/modal/addCameraModal'
import {PropType} from 'vue-types/dist/types'

const AddVedio = defineComponent({
  name: 'AddVedio',
  props: {
    type: {
      type: String as PropType<'button' | 'card'>,
      default: 'button'
    }
  },
  emits: {
    success: (): boolean => true,
    error: (): boolean => true
  },
  setup(props, {emit}) {
    let addCameraModal = ref()
    let openModal = ref<(() => void) | undefined>(undefined)
    onMounted(() => {
      console.log(addCameraModal.value)
    })
    return () => [
      props.type === 'card' ? (
        <CCard
          title='添加摄像头'
          showTitle={false}
          class='w-300 h-260 bg-primaryLight cursor-pointer'
          onClick={() => {
            openModal.value && openModal.value()
          }}
        >
          <div class='w-full h-full flex items-center justify-center'>
            <i class='iconfont icon-jiahao1 text-64 font-bold text-primary'></i>
          </div>
        </CCard>
      ) : props.type === 'button' ? (
        <a-button
          type='primary'
          onClick={() => {
            openModal.value && openModal.value()
          }}
        >
          添加摄像头
        </a-button>
      ) : null,
      <AddCameraModal
        onLoad={open => {
          openModal.value = open
        }}
        onSuccess={() => emit('success')}
        onError={() => emit('error')}
      ></AddCameraModal>
    ]
  }
})

export default AddVedio
